<script setup>
// 视频播放
import { reactive, computed, onMounted, watch } from 'vue'
import { VideoViewModel } from '@/utils/ValueFunction.js'
import '@/utils/aliplayer/aliplayer-min.js'
import '@/utils/aliplayer/aliplayer-min.css'

const props = defineProps({
  data: {
    required: true,
    type: VideoViewModel
  },
  activeIndex: {
    // 当前swiper的下标
    required: true,
    type: Number
  },
  index: {
    // 该页面所在的下标
    required: true,
    type: Number
  }
})
watch(
  () => props?.activeIndex,
  () => {
    console.log('下标改变了')
  }
)
console.log('props: ', props.activeIndex, props.index)
const state = reactive({
  data: props.data,
  player: null
})
const playerId = computed(() => {
  return `c_video_${state.data?.id}`
})
onMounted(() => {
  if (state.player) {
    state.player?.dispose()
  }
  state.player = new Aliplayer(
    {
      id: playerId.value,
      source: state.data?.url,
      autoplay: true,
      playsinline: true,
      preload: true,
      controlBarVisibility: 'click',
      showBarTime: 1e3,
      useH5Prism: true,
      rePlay: true,
      skinLayout: [
        // {
        //   name: 'bigPlayButton',
        //   align: 'blabs',
        //   x: 'calc(50% - 32px)',
        //   y: 'calc(50% - 32px)'
        // },
        {
          name: 'H5Loading',
          align: 'cc'
        },
        {
          name: 'errorDisplay',
          align: 'tlabs',
          x: 0,
          y: 0
        },
        {
          name: 'infoDisplay'
        },
        {
          name: 'tooltip',
          align: 'blabs',
          x: 0,
          y: 56
        },
        {
          name: 'thumbnail'
        },
        {
          name: 'controlBar',
          align: 'blabs',
          x: 0,
          y: 0,
          children: [
            {
              name: 'progress',
              align: 'blabs',
              x: 0,
              y: 44
            },
            {
              name: 'playButton',
              align: 'tl',
              x: 15,
              y: 12
            },
            {
              name: 'timeDisplay',
              align: 'tl',
              x: 10,
              y: 7
            },
            {
              name: 'fullScreenButton',
              align: 'tr',
              x: 10,
              y: 12
            },
            {
              name: 'volume',
              align: 'tr',
              x: 5,
              y: 10
            }
          ]
        }
      ]
    },
    function (player) {
      console.log('The player is created', player)
      // player.play()
      player.mute()
    }
  )
})
/**
 * 点击视频页面
 */
function handleClickVideo() {
  console.log('state.player: ', state.player?.getStatus())
  if (state.player?.getStatus() == 'pause') {
    state.player?.play()
  } else {
    state.player?.pause()
  }
  //
}
</script>

<template>
  <div class="c-video" :id="playerId" @click.stop="handleClickVideo"></div>
  <!-- <video
    controls
    webkit-playsinline=""
    playsinline=""
    x-webkit-airplay=""
    x5-playsinline=""
    preload="preload"
    autoplay="autoplay"
    src="https://weice.cretech.cn/cretech/calc/50827/video/2022/221663829370027.mp4"
    style="width: 100%; height: 100%"
  ></video> -->
  <!-- <video
    class="c-video"
    autoplay
    controls
    webkit-playsinline="true"
    playsinline="true"
    x-webkit-airplay=""
    x5-playsinline=""
    preload="preload"
  >
    <source :src="state.data?.url" type="video/mp4" />
  </video> -->
</template>

<style scoped>
.c-video {
  width: 100%;
  height: 100% !important;
}
/* 大播放按钮 */
.c-video :deep(.prism-big-play-btn) {
  background: url('../assets/img/bigplay.png') no-repeat;
  background-size: contain;
}
/* 播放按钮  */
.c-video :deep(.prism-play-btn) {
  background: url(../assets/img/smallplay.png) no-repeat;
  background-size: contain;
}

/* 播放过程中暂停  */
.c-video :deep(.prism-play-btn.playing) {
  background: url(../assets/img/smallpause.png) no-repeat;
  background-size: contain;
}

/* 全屏按钮 */

.c-video :deep(.prism-fullscreen-btn) {
  background: url(../assets/img/fullscreen.png) no-repeat;
  background-size: contain;
}

/* 全屏后按钮  prism-fullscreen-btn.fullscreen*/
.c-video :deep(.prism-fullscreen-btn.fullscreen) {
  background: url(../assets/img/smallscreen.png) no-repeat;
  background-size: contain;
}

/* 声音按钮 */
.c-video :deep(.prism-volume) {
  background: url(../assets/img/volume.png);
  background-size: contain;
}
/* 静音后按钮 */
.c-video :deep(.prism-volume.mute) {
  background: url(../assets/img/volume.png);
  background-size: contain;
}
</style>
